<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<!--    moment.js-->
    <script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content "></div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4">
            <div class="grid-content "></div>
        </el-col>
        <el-col :span="20">
            <div class="grid-content">
                <el-form :inline="true" :model="goods" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="goods.name" placeholder="商品名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="goods.createtime"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="loadData">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4">
            <div class="grid-content"></div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content">
                <el-table
                        :data="dataList"
                        style="width: 100%"
                >
                    <el-table-column
                            prop="id"
                            label="id">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="商品名称">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="价格"
                            sortable>
                    </el-table-column>
                    <el-table-column
                            label="图片">
                        <template slot-scope="scope">
                            <el-image
                                    style="width: 100px; height: 100px"
                                    :src="JSON.parse(scope.row.imgs)[0].url"
                                    fit="fill"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="sales"
                            label="销量"
                            sortable>
                    </el-table-column>
                    <el-table-column
                            label="创建时间">
                        <template slot-scope="scope">
                            {{ scope.row.createtime | formatDate  }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-link type="success" @click="findGoodsById(scope.row.id)">编辑</el-link>
                            <el-link type="info"  @click="deletebyid(scope.row.id)">下架</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="loadData"
                        @current-change="loadData"
                        :current-page.sync="startPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size.sync="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content"></div>
        </el-col>
    </el-row>


</div>
</body>
<script>
    Vue.filter("formatDate",function (value) {
        return moment(value).format("YYYY-M-D HH:mm:ss");
    })
    new Vue({
        el: "#app",
        data: {
            goods:{
                status:1
            },
            dataList:[],
            pageSize:10,
            startPage:1,
            total:0
        },
        created() {
            this.loadData()
        },
        methods: {
            loadData() {
                axios.post(`/goods/listpage?startPage=${this.startPage}&pageSize=${this.pageSize}`,this.goods).then(({data})=>{
                    this.dataList = data.list;
                    this.total = data.total
                })
            },
            findGoodsById(id){
                window.location.href="addgoods.html?id="+id
            },
            deletebyid(id){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/goods/delById/${id}`).then((res)=>{
                        if(res.data.code==200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.loadData()
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '取消删除!'
                    });
                })
            }
        }
    })
</script>
</html>